<template>
    <div class="screen-box">
        <div class="btn">
            <el-button @click="reset">清空</el-button>
            <el-button @click="initData">查询</el-button>
        </div>

        <SubContentBox slot="content" title="性别" style="height: 8%">
            <el-checkbox-group slot="content" v-model="sex" style="margin-top: 1%;padding-left: 2%;">
                <el-checkbox label="男"></el-checkbox>
                <el-checkbox label="女"></el-checkbox>
            </el-checkbox-group>
        </SubContentBox>
        <SubContentBox slot="content" title="收入情况" style="height: 8%;">
            <el-slider slot="content" v-model="value" range show-stops :max="40" :min="0" style="padding: 0 2%;">
            </el-slider>
        </SubContentBox>
        <SubContentBox slot="content" title="年龄分布" style="height: 8%">
            <el-slider slot="content" v-model="value2" range show-stops :max="120" :min="0" style="padding: 0 2%;">
            </el-slider>
        </SubContentBox>
        <SubContentBox slot="content" title="车辆" style="height: 8%">
            <el-checkbox-group slot="content" v-model="car" style="margin-top: 1%;padding-left: 2%;">
                <el-checkbox label="机动车"></el-checkbox>
                <el-checkbox label="非机动车"></el-checkbox>
            </el-checkbox-group>
        </SubContentBox>
        <SubContentBox slot="content" title="重点人口" style="height: 8%">
            <el-checkbox-group slot="content" v-model="car" style="margin-top: 1%;padding-left: 2%;">
                <el-checkbox label="独居老人"></el-checkbox>
                <el-checkbox label="残疾人"></el-checkbox>
                <el-checkbox label="社戒健康"></el-checkbox>
                <el-checkbox label="重症重精"></el-checkbox>
                <el-checkbox label="犯罪前科"></el-checkbox>
                <el-checkbox label="涉恶人员"></el-checkbox>
            </el-checkbox-group>
        </SubContentBox>
        <SubContentBox slot="content" title="婚姻" style="height: 8%">
            <el-checkbox-group slot="content" v-model="marriage" style="margin-top: 1%;padding-left: 2%;">
                <el-checkbox label="已婚"></el-checkbox>
                <el-checkbox label="未婚"></el-checkbox>
                <el-checkbox label="丧偶"></el-checkbox>
                <el-checkbox label="离异"></el-checkbox>
            </el-checkbox-group>
        </SubContentBox>
        <SubContentBox slot="content" title="职业" style="height: 8%">
            <el-checkbox-group slot="content" v-model="career" style="margin-top: 1%;padding-left: 2%;">
                <el-checkbox label="IT技术"></el-checkbox>
                <el-checkbox label="自雇"></el-checkbox>
                <el-checkbox label="演艺"></el-checkbox>
                <el-checkbox label="餐饮"></el-checkbox>
                <el-checkbox label="服务"></el-checkbox>
                <el-checkbox label="服务"></el-checkbox>
            </el-checkbox-group>
        </SubContentBox>
        <SubContentBox slot="content" title="居住状态" style="height: 8%">
            <el-checkbox-group slot="content" v-model="live" style="margin-top: 1%;padding-left: 2%;">
                <el-checkbox label="业主"></el-checkbox>
                <el-checkbox label="租客"></el-checkbox>
                <el-checkbox label="其他"></el-checkbox>
            </el-checkbox-group>
        </SubContentBox>
        <SubContentBox slot="content" title="地区来源地" style="height:13.5%">
            <el-checkbox-group slot="content" v-model="source" style="margin-top: 1%;padding-left: 2%;">
                <el-checkbox label="山东"></el-checkbox>
                <el-checkbox label="河北"></el-checkbox>
                <el-checkbox label="内蒙"></el-checkbox>
                <el-checkbox label="安徽"></el-checkbox>
                <el-checkbox label="河南"></el-checkbox>
                <el-checkbox label="湖北"></el-checkbox>
                <el-checkbox label="浙江"></el-checkbox>
                <el-checkbox label="湖南"></el-checkbox>
                <el-checkbox label="江苏"></el-checkbox>
                <el-checkbox label="江西"></el-checkbox>
                <el-checkbox label="广西"></el-checkbox>
                <el-checkbox label="山西"></el-checkbox>
                <el-checkbox label="云南"></el-checkbox>
                <el-checkbox label="西藏"></el-checkbox>
                <el-checkbox label="黑龙江"></el-checkbox>
                <el-checkbox label="辽宁"></el-checkbox>
                <el-checkbox label="吉林"></el-checkbox>
                <el-checkbox label="新疆"></el-checkbox>
                <el-checkbox label="陕西"></el-checkbox>
            </el-checkbox-group>
        </SubContentBox>
        <SubContentBox slot="content" title="实有房屋统计" style="height: 8%">
            <el-checkbox-group slot="content" v-model="house" style="margin-top: 1%;padding-left: 2%;">
                <el-checkbox label="自住"></el-checkbox>
                <el-checkbox label="出租"></el-checkbox>
                <el-checkbox label="其他"></el-checkbox>
            </el-checkbox-group>
        </SubContentBox>
        <div class="table">
            <el-table :data="tableData" style="width: 100%" :stripe="true" height="948">
                <el-table-column align="center" prop="序列号" type="index">
                </el-table-column>
                <el-table-column align="center" prop="name" label="姓名">
                </el-table-column>
                <el-table-column align="center" prop="phone" label="电话">
                </el-table-column>
                <el-table-column align="center" prop="sex" label="性别">
                </el-table-column>
                <el-table-column align="center" prop="address" label="所在地址" width="600px">
                </el-table-column>
                <el-table-column align="center" prop="money" label="收入">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'screen',
        components: {


        },
        data() {
            return {
                value: [1, 40],
                value2: [1, 100],
                sex: [],
                car: [],
                marriage: [],
                career: [],
                live: [],
                source: [],
                house: [],
                tableData: []
            };
        },

        watch: {

        },
        created() {
            this.initData()
        },
        mounted() {

        },
        beforeDestroy() {

        },
        methods: {
            initData() {
                this.tableData = []

                for (let i = 0; i < this.$randomNum(40, 60); i++) {
                    let sex = ''
                    if (this.sex.length == 2 || this.sex.length == 0) {
                        if (i % 3 == 0) {
                            sex = '男'
                        }else if (i % 4== 0) {
                            sex = '男'
                        } else if (i % 5== 0) {
                            sex = '男'
                        } else {
                            sex = '女'
                        }
                    } else {
                        sex = this.sex[0]
                    }
                    let obj = {
                        phone: this.randomPhone(),
                        name: this.getName(),
                        sex:sex,
                        address: `福岛路小区${this.$randomNum(1, 3)}单元-${this.$randomNum(1, 33)}02室`,
                        money: this.$randomNum(this.value[0], this.value[1]) + '万元'
                    }
                    this.tableData.push(obj)
                }
            },
            reset() {
                this.value = [1, 40]
                this.value2 = [1, 100]
                this.sex = []
                this.car = []
                this.marriage = []
                this.career = []
                this.live = []
                this.source = []
                this.house = []
                this.initData()
            },
            //生成随机电话号
            randomPhone() {
                var arr = [];
                for (var i = 0; i < 100; i++) {
                    var tel = Math.round((Math.random() * 9));
                    arr.push(tel);
                };
                var telNumber = arr.toString();
                var reg = telNumber.replace(/,/g, "");
                var phoneReg = /1[3-9][0-9]{9}/;
                return phoneReg.exec(reg).toString();
            },
            getName() {
                var familyNames = new Array(
                    "赵", "钱", "孙", "李", "周", "吴", "郑", "王", "冯", "陈",
                    "褚", "卫", "蒋", "沈", "韩", "杨", "朱", "秦", "尤", "许",
                    "何", "吕", "施", "张", "孔", "曹", "严", "华", "金", "魏",
                    "陶", "姜", "戚", "谢", "邹", "喻", "柏", "水", "窦", "章",
                    "云", "苏", "潘", "葛", "奚", "范", "彭", "郎", "鲁", "韦",
                    "昌", "马", "苗", "凤", "花", "方", "俞", "任", "袁", "柳",
                    "酆", "鲍", "史", "唐", "费", "廉", "岑", "薛", "雷", "贺",
                    "倪", "汤", "滕", "殷", "罗", "毕", "郝", "邬", "安", "常",
                    "乐", "于", "时", "傅", "皮", "卞", "齐", "康", "伍", "余",
                    "元", "卜", "顾", "孟", "平", "黄", "和", "穆", "萧", "尹"
                );
                var givenNames = new Array(
                    "子璇", "淼", "国栋", "夫子", "瑞堂", "甜", "敏", "尚", "国贤", "贺祥", "晨涛",
                    "昊轩", "易轩", "益辰", "益帆", "益冉", "瑾春", "瑾昆", "春齐", "杨", "文昊",
                    "东东", "雄霖", "浩晨", "熙涵", "溶溶", "冰枫", "欣欣", "宜豪", "欣慧", "建政",
                    "美欣", "淑慧", "文轩", "文杰", "欣源", "忠林", "榕润", "欣汝", "慧嘉", "新建",
                    "建林", "亦菲", "林", "冰洁", "佳欣", "涵涵", "禹辰", "淳美", "泽惠", "伟洋",
                    "涵越", "润丽", "翔", "淑华", "晶莹", "凌晶", "苒溪", "雨涵", "嘉怡", "佳毅",
                    "子辰", "佳琪", "紫轩", "瑞辰", "昕蕊", "萌", "明远", "欣宜", "泽远", "欣怡",
                    "佳怡", "佳惠", "晨茜", "晨璐", "运昊", "汝鑫", "淑君", "晶滢", "润莎", "榕汕",
                    "佳钰", "佳玉", "晓庆", "一鸣", "语晨", "添池", "添昊", "雨泽", "雅晗", "雅涵",
                    "清妍", "诗悦", "嘉乐", "晨涵", "天赫", "玥傲", "佳昊", "天昊", "萌萌", "若萌"
                );
                let num = this.$randomNum(2, 99)
                return familyNames[num] + givenNames[num]
            }
        }

    };
</script>

<style lang="scss" scoped>
    .screen-box {
        height: 100%;
        padding-top: 1%;
        width: 100%;
        position: relative;

        .btn {
            position: absolute;
            right: 2%;
            top: 1%;

            .el-button {
                background: #00D2FF !important;
                font-size: 17px;
                padding: 10px 20px;
            }
        }

        .table {
            width: 1800px;
            height: 950px;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(2, 25, 57, 0.4);
            top: 0;
            margin: auto;
            pointer-events: none;
        }
    }
</style>